/* pages/index/index.wxss */
// @import '../../style/pubLayout.wxss';

.g-container {

  >.g-header {
    color: #fff;
    background: #34ce7a;

    >.top_wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 88rpx;

      >.side_bar {
        display: flex;
        align-items: center;
        padding: 0 16rpx;

        >.icon {
          margin-right: 4rpx;
          font-size: 36rpx;
        }
      }

      >.set_bar {
        position: relative;
        margin-right: 10rpx;
        padding-right: 20rpx;

        >.btn_set {
          font-size: 36rpx;
          font-weight: 550;
        }

        >.opr_wrap {
          position: absolute;
          top: 100%;
          right: 0;
          transform: translateY(12rpx);
          z-index: 99;
          display: none;
          width: 240rpx;
          padding: 6rpx 16rpx;
          font-size: 22rpx;
          background: rgba(77, 77, 77, 0.98);

          &.show {
            display: block;
          }

          &::before {
            content: '';
            position: absolute;
            top: 0;
            right: 26rpx;
            transform: translateY(-100%);
            width: 0;
            height: 0;
            border-bottom: 8rpx solid rgb(77, 77, 77);
            border-left: 8rpx solid transparent;
            border-right: 8rpx solid transparent;
          }

          >.opr_item {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 66rpx;

            &:first-child {
              border-bottom: 2rpx solid rgba(255, 255, 255, 0.2);
            }

            >.icon {
              width: 32rpx;
              margin-right: 4rpx;
            }
          }
        }
      }
    }

    >.middle_wrap {
      position: relative;
      border-top: 2rpx solid #66ecb6;
      border-bottom: 2rpx solid #66ecb6;
      font-size: 24rpx;

      >.title_wrap {
        padding: 12rpx 30rpx 16rpx 0;

        >.title_sub {
          display: flex;
          justify-content: space-between;
          margin-bottom: 2rpx;
          padding-left: 54rpx;
          color: rgba(255, 255, 255, 0.5);
        }

        >.title_main {
          display: flex;
          justify-content: space-between;
          padding-left: 42rpx;
          font-size: 28rpx;
        }
      }

      >.toggle_wrap {
        overflow: hidden;
        transition: all 0.15s;
        background: #1678FF;

        &.padding {
          padding-bottom: 46rpx;
        }

        >.toggle {
          transition: all 0.15s;

          >.li_item {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 56rpx;
            padding: 0 30rpx 0 54rpx;
            border-bottom: 2rpx solid #1371F5;

            &::after {
              content: '';
              position: absolute;
              top: 0;
              left: 50%;
              transform: translateX(-50%);
              width: 2rpx;
              height: 100%;
              background: #1371F5;
            }

            >.wrap_right {
              color: rgba(255, 255, 255, 0.5);
            }
          }
        }
      }

      >.btn_toggle {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%) rotate(0deg);
        transition: all 0.25s;
        padding: 0 8rpx;
        font-size: 32rpx;

        &.reverse {
          transform: translateX(-50%) rotate(-180deg);
        }
      }
    }

    >.bottom_wrap {
      display: flex;

      >.nav_item {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 144rpx;

        >.icon {
          width: 0;
          height: 48rpx;
          margin-bottom: 4rpx;
        }
      }
    }
  }

  >.g-main {
    // flex: 1;
    display: flex;
    flex-direction: column;
    color: #101010;

    .app_wrap {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 50rpx;
      font-size: 24rpx;

      >.li_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 20%;
        margin-top: 90rpx;

        >.icon {
          width: 0;
          height: 56rpx;
          margin-bottom: 4rpx;
        }

        >.text {
          text-align: center;
        }
      }

    }

    .note_wrap {
      margin-top: 50rpx;
      margin-bottom: 36rpx;

      >.title_wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 50rpx 0 40rpx;

        >.wrap_left {
          font-size: 32rpx;
          font-weight: bold;
        }

        >.wrap_right {
          width: 56rpx;
          border-radius: 12rpx;
          font-size: 18rpx;
          text-align: center;
          color: #fff;
          background: #fc0102;
        }
      }

      >.list_wrap {
        margin: 24rpx;
        padding: 8rpx 0;
        border-radius: 4rpx;
        background: #fff;

        >.li_wrap {
          display: flex;
          align-items: center;

          >.wrap_left >.icon {
            width: 64rpx;
            height: 0;
            margin: 0 20rpx 0 32rpx;
            margin: 0 20rpx 0 32rpx;
          }

          >.wrap_body {
            flex: 1;
            font-size: 24rpx;

            >.text_main {
              display: -webkit-box;
              overflow: hidden;
              margin: 16rpx 0 22rpx;
              text-overflow: ellipsis;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
            }
            >.text_sub {
              margin-bottom: 16rpx;
              color: rgb(149, 149, 149);
            }
          }

          >.wrap_right {
            margin: 0 4rpx 0 52rpx;
          }
        }

        >.more_wrap {
          padding-top: 8rpx;
          padding-bottom: 16rpx;
          font-weight: bold;
          text-align: center;
          color: rgb(27, 113, 236);
        }
      }
    }

    .chart_wrap {
      width: 100%;
      // padding-bottom: 56rpx;
      background: #fff;

      >.chart_setting {
        display: flex;
        justify-content: flex-end;

        >.setting {
          display: flex;
          align-items: center;
          padding: 10rpx 14rpx 0;
          font-size: 24rpx;

          >.icon {
            // width: 40rpx;
            margin-right: 8rpx;
            font-size: 28rpx;
            color: #bebebe;
          }
        }
      }

      >.chart_item {
        // width: 100%;
        // margin-bottom: 56rpx;
        margin: 0 44rpx 56rpx 0;
        padding-left: 44rpx;

        &:nth-child(2) {
          margin-top: -24rpx;
        }

        >.chart_title {
          margin-bottom: 56rpx;
          font-size: 32rpx;
          font-weight: bold;
        }

        >.chart_sub {
          margin-bottom: 48rpx;
          color: #fa8447;
        }

        >.chart {
          width: 100%;
          height: 190px;
        }

        >.rank {
          // margin: 32rpx 44rpx 0 0;
          margin-top: 32rpx;
          padding: 0 24rpx 8rpx;
          border-radius: 4rpx;
          font-size: 28rpx;
          color: #101010;
          background: #f7f8fa;

          >.rank_title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 28rpx 0 36rpx;

            >.wrap_left {
              display: flex;
              align-items: center;

              >.icon {
                width: 36rpx;
                height: 0;
                margin-left: 8rpx;
              }
            }

            >.wrap_right {
              color: rgb(135, 135, 135);
            }
          }

          >.rank_content {
            font-size: 28rpx;

            >.rank_item {
              display: flex;
              align-items: center;
              margin-bottom: 24rpx;

              >.icon {
                width: 40rpx;
                height: 0;
                margin-right: 16rpx;
              }

              >.text {
                flex: 1;
              }
            }
          }
        }

        >.table {
          position: relative;
          // border: 2rpx solid #e6e6e6;
          border-radius: 8rpx;
          font-size: 24rpx;
          overflow-x: auto;


          >.table_header {
            display: flex;
            width: fit-content;
            min-width: 100%;
            box-sizing: border-box;
            border: 2rpx solid #4a5a7a;
            border-bottom: 2rpx solid #e6e6e6;
            border-radius: 8rpx 8rpx 0 0;
            color: #fff;
            background: #4a5a7a;

            >.td {
              flex: 1;
              display: flex;
              justify-content: center;
              align-items: center;
              // width: 25%;
              height: 50rpx;
              box-sizing: border-box;
              border-right: 2rpx solid #e6e6e6;

              &:last-child {
                border-right: none;
              }
            }
          }

          >.table_main {
            position: relative;
            // width: fit-content;
            // min-width: 100%;
            // min-height: 314rpx;
            // max-height: 314rpx;
            // height: 312rpx;
            height: 364rpx;
            box-sizing: border-box;
            // border: 2rpx solid #e6e6e6;
            // border-top: none;
            border-radius: 0 0 8rpx 8rpx;
            overflow-y: auto;
            background: rgba(0, 0, 0, 0);

            >.th, >.tr {
              display: flex;
              width: fit-content;
              min-width: 100%;
              border-bottom: 2rpx solid #e6e6e6;

              >.td {
                flex: 1;
                display: flex;
                align-items: center;
                height: 50rpx;
                box-sizing: border-box;
                padding: 0 8rpx;
                border-right: 2rpx solid #e6e6e6;

                &:last-child {
                  border-right: none;
                }
              }

              &:last-child {
                // border-bottom-color: transparent;
                border-bottom: none;
              }

              &:nth-child(6), &:nth-child(2), &:nth-child(3), &:nth-child(4), &:nth-child(5) {
                // border-bottom-color: #e6e6e6;
                border-bottom: 2rpx solid #e6e6e6;
              }
            }

            >.th {
              position: sticky;
              top: 0;
              border-bottom: none;
              color: #fff;
              background: #4a5a7a;

              >.td {
                justify-content: center;
              }
            }
          }

          &::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 312rpx;
            box-sizing: border-box;
            border: 2rpx solid #e6e6e6;
            border-top: none;
            border-radius: 0 0 8rpx 8rpx;
            background: rgba(0, 0, 0, 0);
          }
        }
      }
    }
  }

  // >.g-footer {
  //   display: flex;
  //   justify-content: center;
  //   margin: 40rpx 0;
  //   font-size: 32rpx;
  //   font-weight: bold;
  //   color: #8C8C8C;
  //   white-space: pre;
  // }
}

.select_wrap {
  // position: fixed;
  // left: 0;
  // bottom: -100%;
  // transition: all 0.3s;
  display: flex;
  flex-direction: column;
  height: 100%;
  // border-top: 2rpx solid #EFEFEF;
  // width: 100%;
  // height: 1020rpx;
  // box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.25);
  // background: #fff;

  &.show {
    bottom: 0;
  }

  >.select_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 120rpx;
    padding: 0 32rpx 0 40rpx;
    border-bottom: 2rpx solid #EFEFEF;
    font-size: 32rpx;

    >.wrap_left {
      color: #2882FE;
    }
  }

  >.list_wrap {
    flex: 1;
    overflow-y: auto;
    color: #101010;

    >.li_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 96rpx;
      padding: 0 20rpx 0 40rpx;
      border-bottom: 2rpx solid #EFEFEF;
    }
  }
}

.popup_wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  color: #fff;
  background: #0E2D59;

  >.popup_header {
    // padding: 110rpx 48rpx 0 32rpx;
    padding: 80rpx 0 0;

    >.user_wrap {
      display: flex;
      align-items: flex-start;
      margin-bottom: 42rpx;
      margin: 0 48rpx 0 32rpx;

      >.user_avatar {
        width: 116rpx;
        height: 116rpx;
        border-radius: 16rpx;
        margin-right: 26rpx;
        overflow: hidden;

        >.avatar {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 116rpx;
          height: 116rpx;
          padding: 0;
          background: #fff;

          >.img {
            width: 116rpx;
            height: 116rpx;
          }

          >.iconfont {
            font-size: 72rpx;
            color: #cdcdcd;
          }
        }
      }

      >.user_info {
        font-size: 24rpx;

        >.user_name {
          font-size: 36rpx;
          margin-bottom: 8rpx;
        }
      }
    }

    >.search_wrap {
      display: flex;
      align-items: center;
      // width: 100%;
      height: 72rpx;
      box-sizing: border-box;
      margin: 0 48rpx 0 32rpx;
      padding: 16rpx;
      border: 2rpx solid #bbb;
      border-radius: 8rpx;
      color: #101010;
      background: #fff;

      >.ipt {
        flex: 1;
      }
    }
  }

  >.popup_body {
    flex: 1;
    // overflow-y: auto;
    margin-top: 22rpx;

    >.li_item {
      position: relative;
      display: flex;
      align-items: center;
      transition: all 0.15s;
      height: 124rpx;
      padding: 0 54rpx 0 26rpx;

      &.active {
        background: rgba(28, 60, 99, 100);

        >.icon_wrap {
          background: #fff;

          >.icon {
            color: #2180E9;
          }
        }

        >.selected_icon {
          opacity: 1;
        }
      }

      &.height0 {
        height: 0;
        overflow: hidden;
      }

      >.icon_wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 56rpx;
        height: 56rpx;
        margin-right: 22rpx;
        border-radius: 16rpx;
        background: rgba(42, 72, 110, 100);

        >.icon {
          width: 28rpx;
          color: #CECECE;
        }
      }

      >.selected_icon {
        position: absolute;
        top: 50%;
        right: 56rpx;
        transform: translateY(-50%);
        transition: all 0.2s;
        opacity: 0;
        width: 48rpx;
      }
    }
  }

  >.popup_footer {
    height: 332rpx;
    padding: 0 24rpx 0 46rpx;
    color: #CDDCEB;

    >.divider {
      position: relative;
      margin-bottom: 22rpx;

      &::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 514rpx;
        border-bottom: 2rpx solid rgba(23, 54, 98, 100);
      }
    }

    >.nav_item {
      display: flex;
      align-items: center;
      height: 64rpx;
      margin-bottom: 12rpx;

      >.icon {
        width: 32rpx;
        margin-right: 10rpx;
      }
    }
  }


  // van-tabs 手机上有上下两条边框，处理不了
  >.popup_body {
    margin-top: 0;
    overflow-y: auto;

    .custom_cls {
      display: flex;
      flex-direction: column;
      // height: calc(100% - 1px);
      height: 100%;
      border-top: 2rpx solid #0E2D59 !important;

      .van-tabs__wrap {
        height: 72rpx !important;
        border: none !important;
      }

      .van-tabs__content {
        flex: 1;
      }
    }

    .nav_cls {
      height: 72rpx;
      // padding: 0 60rpx;
      background: #0E2D59;
      // background: pink;

      .van-ellipsis {
        height: 72rpx;
        border: none !important;
      }
    }

    .slot_cls {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .search_wrap {
      display: flex;
      align-items: center;
      // width: 100%;
      height: 72rpx;
      box-sizing: border-box;
      margin: 22rpx 48rpx 0 32rpx;
      padding: 16rpx;
      border: 2rpx solid #bbb;
      border-radius: 8rpx;
      color: #101010;
      background: #fff;

      >.ipt {
        flex: 1;
      }
    }

    .list_wrap {
      flex: 1;
      margin-top: 22rpx;
      overflow-y: auto;

      >.li_item {
        position: relative;
        display: flex;
        align-items: center;
        transition: all 0.15s;
        height: 124rpx;
        padding: 0 54rpx 0 26rpx;

        &.active {
          background: rgba(28, 60, 99, 100);

          >.icon_wrap {
            background: #fff;

            >.icon {
              color: #2180E9;
            }
          }

          >.selected_icon {
            opacity: 1;
          }
        }

        &.height0 {
          height: 0;
          overflow: hidden;
        }

        >.icon_wrap {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 56rpx;
          height: 56rpx;
          margin-right: 22rpx;
          border-radius: 16rpx;
          background: rgba(42, 72, 110, 100);

          >.icon {
            width: 28rpx;
            color: #CECECE;
          }
        }

        >.selected_icon {
          position: absolute;
          top: 50%;
          right: 56rpx;
          transform: translateY(-50%);
          transition: all 0.2s;
          opacity: 0;
          width: 48rpx;
        }
      }
    }

  }


  >.popup_body1 {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;

    >.tab_wrap {
      position: relative;
      display: flex;
      align-items: center;
      height: 64rpx;
      margin: 0 48rpx 0 32rpx;

      >.tab {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        color: gray;

        &.active {
          color: #fff;
        }
      }

      >.bar {
        position: absolute;
        left: 25%;
        bottom: 0;
        transform: translateX(-50%);
        transition: all 0.3s;
        width: 3em;
        height: 6rpx;
        background: #fff;

        &.half {
          left: 75%;
        }
      }
    }

    >.tab_content {
      flex: 1;
      display: flex;
      width: 200%;
      overflow-y: auto;
      transition: all 0.3s;
      transform: translateX(0%);

      &.half {
        transform: translateX(-50%);
      }

      >.content_wrap {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow-y: auto;

        >.search_wrap {
          display: flex;
          align-items: center;
          // width: 100%;
          height: 72rpx;
          box-sizing: border-box;
          // margin: 22rpx 48rpx 0 32rpx;
          margin: 16rpx 48rpx 0 32rpx;
          padding: 16rpx;
          border: 2rpx solid #bbb;
          border-radius: 8rpx;
          color: #101010;
          background: #fff;

          >.ipt {
            flex: 1;
          }
        }

        >.list_wrap {
          flex: 1;
          margin-top: 22rpx;
          overflow-y: auto;

          >.li_item {
            position: relative;
            display: flex;
            align-items: center;
            transition: all 0.15s;
            height: 124rpx;
            padding: 0 54rpx 0 26rpx;

            &.active {
              background: rgba(28, 60, 99, 100);

              >.icon_wrap {
                background: #fff;

                >.icon {
                  color: #2180E9;
                }
              }

              >.selected_icon {
                opacity: 1;
              }
            }

            &.height0 {
              height: 0;
              overflow: hidden;
            }

            >.icon_wrap {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 56rpx;
              height: 56rpx;
              margin-right: 22rpx;
              border-radius: 16rpx;
              background: rgba(42, 72, 110, 100);

              >.icon {
                width: 28rpx;
                color: #CECECE;
              }
            }

            >.selected_icon {
              position: absolute;
              top: 50%;
              right: 56rpx;
              transform: translateY(-50%);
              transition: all 0.2s;
              opacity: 0;
              width: 48rpx;
            }
          }
        }
      }
    }
  }
}
